<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            //淡入淡出之间的切换
            $(".btn0").click(function () {
                $("#div1").fadeToggle();
                $("#div2").fadeToggle("slow");
                $("#div3").fadeToggle(3000);
            });

            //淡入效果
            $(".btn1").click(function () {
                $("#div1").fadeIn();
                $("#div2").fadeIn("slow");
                $("#div3").fadeIn(3000);
            });

            //淡出效果
            $(".btn2").click(function () {
                $("#div1").fadeOut();
                $("#div2").fadeOut("slow");
                $("#div3").fadeOut(3000);
            });
            //渐变不透明度
            $(".btn3").click(function () {
                $("#div1").fadeTo("slow", 0.15);
                $("#div2").fadeTo("slow", 0.4);
                $("#div3").fadeTo("slow", 0.7);
            });
        });
    </script>
</head>

<body>
    <p>以下实例演示了 fadeIn() fadeOut()使用了不同参数的效果。</p>

    <button class="btn0">切换</button>
    <button class="btn1">点击淡入 div 元素。</button>
    <button class="btn2">点击淡出 div 元素。</button>
    <button class="btn3">渐变为给定的不透明度</button>
    <br><br>
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
    <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
    <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>

</html>